<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="send">发送消息</button>

    <ul id="list">
        <li>消息1</li>
    </ul>
    <script>
        var Socket = new WebSocket("ws://localhost:8080");
        // 初始化Socket对象
        Socket.onopen=function(){
            console.log("我连接上啦")
        }
        Socket.onmessage=function(msg){
            console.log("我接收到消息了，消息是")
            console.log(msg);
            var lists = document.querySelector("#list");
            var oli = document.createElement("li");
            oli.innerHTML = msg.data;
            lists.appendChild(oli)
        }
        Socket.onerror=function(){
            console.log("出错啦")
        }
        Socket.onclose=function(){
            console.log("拜拜再见")
        }

        document.querySelector("#send").onclick = function(){
            Socket.send(document.querySelector("#txt").value)
        }
    </script>
</body>
</html>